<template>
    <van-nav-bar
        left-arrow
        :title="$t('wallet.myCard')"
        @click-left="router.back()"
    />
    <div class="my-card-body">
        <div class="card-list" v-for="(item, index) in list" :key="index" @click="onJump(item)">
            <img src="@/assets/images/card1.png" v-if="index%3 == 0">
            <img src="@/assets/images/card2.png" v-if="index%3 == 1">
            <img src="@/assets/images/card3.png" v-if="index%3 == 2">
            <div class="card-list-num app-flex-bet">
                <div v-for="(num, nIndex) in item.nums" :key="nIndex">
                    {{ num }}
                </div>
            </div>
        </div>
        <div class="my-card" @click="onJump({})">
            <van-icon name="add-o" size="30" class="my-card-icon"/>
            {{ $t('wallet.addMyCard') }}
        </div>
    </div>
    
</template>
<script setup>
import { reactive, ref } from '@vue/reactivity';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from "vue-router"
import { getCardList } from '@/api/card';
import { onMounted } from '@vue/runtime-core';

const { t } = useI18n()
const router = useRouter()
const list = ref([])
// 用*代替前面位数
const onlyFourBank = (value) => {
	if (value && value.length > 4) {
        let num = value.length % 4
        num = num == 0 ? 4 : num
		return `${"*".repeat(value.length - num)}${value.slice(-num)}`;
	}
	return value;
}
// 每四位隔开
const fourNums = (num) => {
 	if (!num) return
    let value = num.replace(/(.{4})/g, "$1 ")
    return value.split(" ").filter(v => v.length > 0)
} 

function onJump (item) {
    router.push({
        path: "/addCard",
        query: item
    })
}
async function getList () {
    let ret = await getCardList()
    if (ret.code == 200) {
        ret.data.map(v => {
            if (v.bankCardNumber.length > 16) {
                v.nums = ['****','****','****', v.bankCardNumber.slice(-4)]
            } else {
                let value = onlyFourBank(v.bankCardNumber)
                v.nums = fourNums(value)
            }
           
        })
        list.value = ret.data
    }
}
// 获取列表
onMounted(() => {
    getList()
})
</script>
<style lang="less" scoped>
    .my-card-body {
        height: calc(100vh - 50px);
        overflow: auto;
    }
    .my-card {
        border: 2px dashed #575757;
        border-radius: 32px;
        padding: 10px;
        margin: 30px 64px;
        text-align: center;
        color: var(--primary);
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        &-icon {
            margin: 0 4px;
        }
    }
    .card-list {
        margin: 15px 16px 0;
        text-align: center;
        position: relative;
        img {
            width: calc(100% - 70px);
            margin: 0 auto;
            vertical-align: bottom;
        }
        
        &-num {
            position: absolute;
            bottom: 30px;
            color: #fff;
            width: calc(100% - 100px);
            text-align: center;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: bold;
            margin: 0 auto;
            left: 0;
            right: 0;
        }
    }
    .card-list::after {
        content: " ";
        height: 1px;
        background: #CECECE;
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
    }
</style>